<template>
    <div class="lister">
        <ul>
          <li v-for="item in datalist" :key="item.dtid">
           <div class="homlister">
            <h3>{{item.title}}<span @click="moreclick(item.dtid)">+MORE</span></h3>
            <div class="itemlist">
              <ul>
                <li v-for="i in item.data" :key="i.id" @click="handleclick(i.id)">
                  <div class="singleitem_img">
                  <img :src="i.imgurl">
                  <div class="singleitem_grading">{{i.grading}}</div>
                 </div>
                 <p>{{i.nickname}}</p>
                  <p class="singleitem_price">￥<span>{{i.price}}</span>/{{i.typeflag}}</p>
                </li>
              </ul>
             </div>
           </div>
          </li>
         </ul>
    </div>
</template>
<script>
import getjson from '../../directive/getjson'
export default {
  data () {
    return {
      datalist: []
    }
  },
  mounted () {
    getjson('https://yapi.tuwan.com/Index/getPlayIndexApi/?type=chat&callback=_jsonp5hs1jt4f1nn', (res) => {
      console.log(res.hot)
      this.datalist = res.hot
    })
  },
  methods: {
    moreclick (dtid) {
      this.$router.push(`/list/?dtid=${dtid}`)
    },
    handleclick (id) {
      this.$router.push(`/content/?id=${id}`)
    }
  }
}
</script>

<style lang="scss" scoped>
*{
  padding: 0;
  margin: 0;
}
.lister{
  width: 100%;
  padding-bottom: 80px;
}
.homlister{
  position: relative;
  width: 100%;
  background: #ffffff;
  margin-bottom: 10px;
}
.itemlist{
  margin-left: .5rem;
  margin-right: 5px;
}
h3{
  font-size: 16px;
  font-weight: 300;
  color: #f92246;
  text-align: center;
  position: relative;
  padding-top: 6px;
  margin-right:0.5rem;
  span{
   // float: right;
    color: #aaa;
    right: 1rem;
    position: absolute;
    height: 100%;
    display: inline-block;
    margin-bottom: 5px;
    font-size:11px;
  }
}
.homlister ul{
   display: flex;
  li{
    justify-content: space-around;
    list-style: none;
    padding:5px;
    .singleitem_img{
   position: relative;
   }
   .singleitem_grading{
     position: absolute;
    padding: 0 0.05rem;
    height: 15px;
    background: rgba(255,207,166,0.90);
    right: 0.2rem;
    top: 0.2rem;
    border-radius:3px;
    font-size: 10px;
    line-height:15px;
    color: #fff;
    text-align: center;
}
    img{
      width: 100%;
    }
    p{
      text-align: left;
    padding-left: 0.2rem;
    font-size: 13px;
    margin: 0;
    line-height: 1.2;
    color: #333;
    }
    .singleitem_price{
          color: #f92246;
    font-size: 10px;
    padding-left: 0;
    margin-top: 0.02rem;
    span{
      font-size: 16px;
    }
    }
  }
}
</style>
